aside[su~="."] {
    position: absolute;
    width: var(--w);
    height: var(--h);
    overflow: hidden;
}

aside[su~="."] ul {
    position: absolute;
    width: calc(var(--w) * 5);
    animation: ma 20s ease-out infinite alternate;
    padding: 0;
}

aside[su~="."] ul li {
    float: left;
    width: var(--w);
    height: var(--h);
    background-size: cover;
}

aside[su~="."] ul li a {
    margin: 0;
    display: block;
    width: calc(0.8 * var(--w));
    float: left;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0px;
    height: calc( 0.2 * var(--h));
    margin-left: calc(0.1 * var(--w));
    text-shadow: 0 0 5px black;
}

@keyframes ma {
    0%,
    20% {
        margin-left: 0px;
        --i: 1;
    }
    25%,
    40% {
        margin-left: calc(0px - 1*var(--w));
        --i: 2;
    }
    45%,
    60% {
        margin-left: calc(0px - 2*var(--w));
        --i: 3;
    }
    65%,
    80% {
        margin-left: calc(0px - 3*var(--w));
        --i: 4;
    }
    85%,
    100% {
        margin-left: calc(0px - 4*var(--w));
        --i: 5;
    }
}

aside[su~="."] button {
    position: absolute;
    z-index: 2;
    display: inline-block;
    right: 10px;
    top: calc(var(--h) - var(--p));
    border-radius: 50%;
    background: transparent;
    border: 1px solid white;
    width: 10px;
    height: 10px;
    display: block;
    padding: 0;
    cursor: pointer;
    text-align: center;
    opacity: 0.8;
}

aside[su~="."] button:hover {
    background: white;
}

aside[su~="."] button:hover,
aside[su~="."] ul:hover {
    will-change: transform;
    animation-play-state: paused;
}

aside[su~="."] button:nth-child(2) {
    margin-right: var(--p);
}

aside[su~="."] button:nth-child(3) {
    margin-right: calc(2 * var(--p));
}

aside[su~="."] button:nth-child(4) {
    margin-right: calc(3 * var(--p));
}

aside[su~="."] button:nth-child(5) {
    margin-right: calc(4 * var(--p));
}

aside[su~="."] button:focus-within {
    background: white;
}

aside[su~="."] button:nth-child(1):focus-within~ul {
    animation: ma1 .5s ease-out forwards;
}

aside[su~="."] button:nth-child(2):focus-within~ul {
    animation: ma2 .5s ease-out forwards;
}

aside[su~="."] button:nth-child(3):focus-within~ul {
    animation: ma3 .5s ease-out forwards;
}

aside[su~="."] button:nth-child(4):focus-within~ul {
    animation: ma4 .5s ease-out forwards;
}

aside[su~="."] button:nth-child(5):focus-within~ul {
    animation: ma5 .5s ease-out forwards;
}

@keyframes ma1 {
    0% {
        margin-left: calc(-4 * var(--w));
    }
    100% {
        margin-left: -0px;
    }
}

@keyframes ma2 {
    0% {
        margin-left: calc(-4 * var(--w));
    }
    100% {
        margin-left: calc(-1 * var(--w));
    }
}

@keyframes ma3 {
    100% {
        margin-left: calc(-2 * var(--w));
    }
}

@keyframes ma4 {
    100% {
        margin-left: calc(-3 * var(--w));
    }
}

@keyframes ma5 {
    100% {
        margin-left: calc(-4 * var(--w));
    }
}